<!DOCTYPE html>
<html lang="en" class="app">
<head>  
  <meta charset="utf-8" />
  <title>Musik | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="/static/home/js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="/static/home/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="/static/home/css/animate.css" type="text/css" />
  <link rel="stylesheet" href="/static/home/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="/static/home/css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="/static/home/css/font.css" type="text/css" />
  <link rel="stylesheet" href="/static/home/css/app.css" type="text/css" />
  <link rel="stylesheet" href="/static/home/css/APlayer.min.css" type="text/css" />

    <!--[if lt IE 9]>
    <script src="/static/home/js/ie/html5shiv.js"></script>
    <script src="/static/home/js/ie/respond.min.js"></script>
    <script src="/static/home/js/ie/excanvas.js"></script>
  <![endif]-->



</head>
<body class="">
  <section class="vbox">
    <header class="bg-white-only header header-md navbar navbar-fixed-top-xs">
      <div class="navbar-header aside bg-info nav-xs">
        <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html">
          <i class="icon-list"></i>
        </a>
        <a href="{:url('home/Index/Index')}" class="navbar-brand text-lt">
          <i class="icon-earphones"></i>
          <img src="/static/home/images/logo.png" alt="." class="hide">
          <span class="hidden-nav-xs m-l-sm">Musik</span>
        </a>
        <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
          <i class="icon-settings"></i>
        </a>
      </div>      <ul class="nav navbar-nav hidden-xs">
        <li>
          <a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="text-muted">
            <i class="fa fa-indent text"></i>
            <i class="fa fa-dedent text-active"></i>
          </a>
        </li>
      </ul>
      <form action="##" onsubmit="return false" class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-btn">
              <button id="" type="button" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
            </span>

            <span>
            <input id="search" type="text" class="form-control input-sm no-border rounded" placeholder="输入搜索内容">
            </span>
            <!--模态框-->
            <span>
              <button type="button" onclick="searchs()" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg" style="float: right;margin-right: -38px;width: 70px;height: 30px;">搜索</button>
              <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                  <div id="searchmusic" class="modal-content">

                  </div>
                </div>
              </div>
            </span>
          </div>
        </div>
      </form>
      <div class="navbar-right ">
        <ul class="nav navbar-nav m-n hidden-xs nav-user user">
          <li class="hidden-xs">
            <a href="#" class="dropdown-toggle lt" data-toggle="dropdown">
              <i class="icon-bell"></i>
              <span class="badge badge-sm up bg-danger count">2</span>
            </a>
            <section class="dropdown-menu aside-xl animated fadeInUp">
              <section class="panel bg-white">
                <div class="panel-heading b-light bg-light">
                  <strong>You have <span class="count">2</span> notifications</strong>
                </div>
                <div class="list-group list-group-alt">
                  <a href="#" class="media list-group-item">
                    <span class="pull-left thumb-sm">
                      <img src="/static/home/images/a0.png" alt="..." class="img-circle">
                    </span>
                    <span class="media-body block m-b-none">
                      Use awesome animate.css<br>
                      <small class="text-muted">10 minutes ago</small>
                    </span>
                  </a>
                  <a href="#" class="media list-group-item">
                    <span class="media-body block m-b-none">
                      1.0 initial released<br>
                      <small class="text-muted">1 hour ago</small>
                    </span>
                  </a>
                </div>
                <div class="panel-footer text-sm">
                  <a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
                  <a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
                </div>
              </section>
            </section>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="/uploads/{$Request.session.user.icon}" height="50px" class="img-circle">
              </span>
              {$Request.session.user.name} <b class="caret"></b>
            </a>
            <ul class="dropdown-menu animated fadeInRight">            
              <li>
                <span class="arrow top"></span>
                <a href="#">Settings</a>
              </li>
              <li>
                <a href="{:url('home/User/Friend')}">好友列表</a>
              </li>
              <li>
                <a href="#">
                  <span class="badge bg-danger pull-right">3</span>
                  Notifications
                </a>
              </li>
              <li>
                <a href="docs.html">Help</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="modal.lockme.html" data-toggle="ajaxModal" >Logout</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>      
    </header>
      <!-- 头部结束 -->
{block name="biaoqian"}
    <section>
      <section class="hbox stretch">
{/block}
        <!-- .aside -->
        <!-- 右边导航 -->
        <aside class="bg-black dk nav-xs aside hidden-print" id="nav">          
          <section class="vbox">
            <section class="w-f-md scrollable">
              <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2">
                


                <!-- nav -->
                <nav class="nav-primary hidden-xs">
                  <ul class="nav bg clearfix">
                    <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                      Discover
                    </li>
                    <li>
                      <a href="{:url('home/Index/Index')}">
                        <i class="icon-disc icon text-success"></i>
                        <span class="font-bold">首页</span>
                      </a>
                    </li>
                    <li>
                      <a href="{:url('home/Style/Index')}">
                        <i class="icon-music-tone-alt icon text-info"></i>
                        <span class="font-bold">风格</span>
                      </a>
                    </li>
                    <li>
                      <a href="{:url('home/Random/Index')}">
                        <i class="icon-drawer icon text-primary-lter"></i>
                        <b class="badge bg-primary pull-right">6</b>
                        <span class="font-bold">事件</span>
                      </a>
                    </li>
                    <li>
                      <a href="{:url('home/Listen/Index')}">
                        <i class="icon-list icon  text-info-dker"></i>
                        <span class="font-bold">听</span>
                      </a>
                    </li>
                    <li>
                      <a href="{:url('home/Video/Index')}" data-target="#content" data-el="#bjax-el" data-replace="true">
                        <i class="icon-social-youtube icon  text-primary"></i>
                        <span class="font-bold">所有歌单</span>
                      </a>
                    </li>
                    <li class="m-b hidden-nav-xs"></li>
                  </ul>
                  <ul class="nav" data-ride="collapse">
                    <li >
                      <a href="#" class="auto">
                        <span class="pull-right text-muted">
                          <i class="fa fa-angle-left text"></i>
                          <i class="fa fa-angle-down text-active"></i>
                        </span>
                        <i class="icon-grid icon">
                        </i>
                        <span>个人中心</span>
                      </a>
                      <ul class="nav dk text-sm">
                        <li >
                          <a href="{:url('home/User/Friend')}" class="auto">
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>好友列表</span>
                          </a>
                        </li>
                        <li >
                          <a href="{:url('home/User/Zone')}" class="auto">
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>朋友圈</span>
                          </a>
                        </li>
                        <li >
                          <a href="{:url('home/Login/Index')}" class="auto">
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>登陆</span>
                          </a>
                        </li>
                        <li >
                          <a href="{:url('home/Sign/Index')}" class="auto">
                            <i class="fa fa-angle-right text-xs"></i>
                            <span>注册</span>
                          </a>
                        </li>
                        <li >
                          <a href="404.html" class="auto">
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>404</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </nav>
                <!-- / nav -->
              </div>
            </section>


            <!--尾部的播放插件-->

            <footer class="footer hidden-xs no-padder text-center-nav-xs">
              <div class="bg hidden-xs ">
                  <div class="dropdown dropup wrapper-sm clearfix">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                      <span class="thumb-sm avatar pull-left m-l-xs">                        
                        <img src="/uploads/{$Request.session.user.icon}" class="dker" >
                      </span>

                      <span class="hidden-nav-xs clear">
                        <span class="block m-l">
                          <strong class="font-bold text-lt">John.Smith</strong>
                          <b class="caret"></b>
                        </span>
                        <span class="text-muted text-xs block m-l">Art Director</span>
                      </span>
                    </a>
                    <ul class="dropdown-menu animated fadeInRight aside text-left">
                      <li>
                        <span class="arrow bottom hidden-nav-xs"></span>
                        <a href="#">Settings</a>
                      </li>
                      <li>
                        <a href="{:url('home/User/Friend')}">好友列表</a>
                      </li>
                      <li>
                        <a href="#">
                          <span class="badge bg-danger pull-right">3</span>
                          Notifications
                        </a>
                      </li>
                      <li>
                        <a href="docs.html">Help</a>
                      </li>
                      <li class="divider"></li>
                      <li>
                        <a href="modal.lockme.html" data-toggle="ajaxModal" >Logout</a>
                      </li>
                    </ul>
                  </div>
                </div>
            </footer>
          </section>
        </aside>
        <!-- /.aside -->

{block name="zhongjian"}
        <section id="content">
          <section class="hbox stretch">
            <section>
              <section class="vbox">

                <section class="scrollable padder-lg w-f-md" id="bjax-target">
                  <a href="#" class="pull-right text-muted m-t-lg" data-toggle="class:fa-spin" ><i class="icon-refresh i-lg  inline" id="refresh"></i></a>
                  <h2 class="font-thin m-b">热门单曲推荐 <span class="musicbar animate inline m-l-sm" style="width:20px;height:20px">
                    <span class="bar1 a1 bg-primary lter"></span>
                    <span class="bar2 a2 bg-info lt"></span>
                    <span class="bar3 a3 bg-success"></span>
                    <span class="bar4 a4 bg-warning dk"></span>
                    <span class="bar5 a5 bg-danger dker"></span>
                  </span></h2>


                  <!--热门单曲遍历-->
                  <div id="mylist" class="row row-sm">



                  </div>



                  <div class="row">
                    <div class="col-md-12">

                      <h3 class="font-thin">精品歌单推荐</h3>

                      <!--精品歌单遍历-->
                      <div id="slist" class="row row-sm">



                      </div>





                    </div>

                  </div>

                </section>
                {/block}


                <!--播放插件-->

                <footer class="footer bg-dark">
                  <div id="aplayer" style="height: 60px;"></div>
                </footer>




              </section>
            </section>
            <!-- side content -->
            <aside class="aside-md bg-light dk" id="sidebar">
              <section class="vbox animated fadeInRight">
                <section class="w-f-md scrollable hover">
                  <h4 class="font-thin m-l-md m-t">Connected</h4>
                  <ul class="list-group no-bg no-borders auto m-t-n-xxs">
                    <li class="list-group-item">
                      <span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="/static/home/images/a1.png" alt="..." class="img-circle">
                        <i class="on b-light right sm"></i>
                      </span>
                      <div class="clear">
                        <div><a href="#">Chris Fox</a></div>
                        <small class="text-muted">New York</small>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="/static/home/images/a2.png" alt="...">
                        <i class="on b-light right sm"></i>
                      </span>
                      <div class="clear">
                        <div><a href="#">Amanda Conlan</a></div>
                        <small class="text-muted">France</small>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="/static/home/images/a3.png" alt="...">
                        <i class="busy b-light right sm"></i>
                      </span>
                      <div class="clear">
                        <div><a href="#">Dan Doorack</a></div>
                        <small class="text-muted">Hamburg</small>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="/static/home/images/a4.png" alt="...">
                        <i class="away b-light right sm"></i>
                      </span>
                      <div class="clear">
                        <div><a href="#">Lauren Taylor</a></div>
                        <small class="text-muted">London</small>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="/static/home/images/a5.png" alt="..." class="img-circle">
                        <i class="on b-light right sm"></i>
                      </span>
                      <div class="clear">
                        <div><a href="#">Chris Fox</a></div>
                        <small class="text-muted">Milan</small>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="/static/home/images/a6.png" alt="...">
                        <i class="on b-light right sm"></i>
                      </span>
                      <div class="clear">
                        <div><a href="#">Amanda Conlan</a></div>
                        <small class="text-muted">Copenhagen</small>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="/static/home/images/a7.png" alt="...">
                        <i class="busy b-light right sm"></i>
                      </span>
                      <div class="clear">
                        <div><a href="#">Dan Doorack</a></div>
                        <small class="text-muted">Barcelona</small>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="/static/home/images/a8.png" alt="...">
                        <i class="away b-light right sm"></i>
                      </span>
                      <div class="clear">
                        <div><a href="#">Lauren Taylor</a></div>
                        <small class="text-muted">Tokyo</small>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="/static/home/images/a9.png" alt="..." class="img-circle">
                        <i class="on b-light right sm"></i>
                      </span>
                      <div class="clear">
                        <div><a href="#">Chris Fox</a></div>
                        <small class="text-muted">UK</small>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="/static/home/images/a1.png" alt="...">
                        <i class="on b-light right sm"></i>
                      </span>
                      <div class="clear">
                        <div><a href="#">Amanda Conlan</a></div>
                        <small class="text-muted">Africa</small>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="/static/home/images/a2.png" alt="...">
                        <i class="busy b-light right sm"></i>
                      </span>
                      <div class="clear">
                        <div><a href="#">Dan Doorack</a></div>
                        <small class="text-muted">Paris</small>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="/static/home/images/a3.png" alt="...">
                        <i class="away b-light right sm"></i>
                      </span>
                      <div class="clear">
                        <div><a href="#">Lauren Taylor</a></div>
                        <small class="text-muted">Brussels</small>
                      </div>
                    </li>
                  </ul>
                </section>
                <footer class="footer footer-md bg-black">
                  <form class="" role="search">
                    <div class="form-group clearfix m-b-none">
                      <div class="input-group m-t m-b">
                        <span class="input-group-btn">
                          <button type="submit" class="btn btn-sm bg-empty text-muted btn-icon"><i class="fa fa-search"></i></button>
                        </span>
                        <input type="text" class="form-control input-sm text-white bg-empty b-b b-dark no-border" placeholder="Search members">
                      </div>
                    </div>
                  </form>
                </footer>
              </section>              
            </aside>
            <!-- / side content -->
          </section>
          <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
        </section>
      </section>
    </section>    
  </section>
  <script src="/static/home/js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="/static/home/js/bootstrap.js"></script>
  <!-- App -->
  <script src="/static/home/js/app.js"></script>  
  <script src="/static/home/js/slimscroll/jquery.slimscroll.min.js"></script>
  <script src="/static/home/js/app.plugin.js"></script>
  <script type="text/javascript" src="/static/home/js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="/static/home/js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="/static/home/js/jPlayer/demo.js"></script>
  <script type="text/javascript" src="/static/home/js/APlayer.min.js"></script>

  <script>
      $.ajax({
          type: "POST",
          url: 'https://api.bzqll.com/music/netease/songList?key=579621905&id=3778678&limit=30&offset=0',
          dataType: 'json',
          success: function(result){
              var songs=result.data.songs;
              console.log(songs);
              var list="";
              for(var i=0; i<30; i++) {
                  var b = songs[i].id;
                  // console.log(b);

                  var a = "{:url('home/Listen/Music',array('id'=>'b'))}";
                  var c = a.replace('b',b);
                  // console.log(c);
                  list+=`
                      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="bottom">
                            <span class="badge bg-info m-l-sm m-b-sm"></span>
                          </div>
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="text-info padder m-t-sm text-sm">
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star-o text-muted"></i>
                            </div>
                            <div class="center text-center m-t-n">
                              <a href="#" ><i id="${songs[i].id}" onclick="a()" class="icon-control-play i-2x"></i></a>
                              <input type="text" hidden id="music_id" value="${songs[i].id}">
                              <input type="text" hidden id="name" value="${songs[i].name}">
                              <input type="text" hidden id="singer" value="${songs[i].singer}">
                              <input type="text" hidden id="url" value="${songs[i].url}">
                              <input type="text" hidden id="img" value="${songs[i].pic}">
                            </div>
                            <div class="bottom padder m-b-sm">
                              <a href="${c}" class="pull-right">
                                <i class="icon-arrow-right"></i>
                              </a>
                              <a href="#">
                              <i class="fa fa-plus-circle"></i>
                              </a>
                            </div>
                          </div>
                          <a href="#"><img src="${songs[i].pic}" alt="" class="r r-2x img-full"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis">${songs[i].name}</a>
                          <a href="#" class="text-ellipsis text-xs text-muted">${songs[i].singer}</a>
                        </div>
                      </div>
                    </div>
                  `
              }
              $("#mylist").html(list);
          }
      });


      function a(){
          var singer = $("#singer").val();
          var name = $("#name").val();
          var urls = $("#url").val();
          var imgs = $("#img").val();

          const ap = new APlayer({
              container: document.getElementById('aplayer'),
              audio: [{
                  name: name,
                  artist: singer,
                  url: urls,
                  cover: imgs
              }]
          });
      }

  </script>
  <script>
      //精品歌单
      $.ajax({
          type: "POST",
          url: 'https://api.bzqll.com/music/netease/hotSongList?key=579621905&cat=全部&limit=10&offset=0',
          dataType: 'json',
          success: function(result){
              var songlist=result.data;
              // console.log(songlist[1].coverImgUrl);
              // console.log(songlist[1].tag);
              // console.log(songlist);

              var songlists="";
              for(var j=0; j<4; j++) {
                  songlists+=`
                        <div class="col-xs-6 col-sm-3">
                          <div class="item">
                            <div class="pos-rlt">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                <form action="{:url('home/Video/MyList')}" method="post">
                                    <input type="text" style="visibility:hidden" name="id" value="${songlist[j].id}">
                                    <input type="text" style="visibility:hidden" name="title" value="${songlist[j].title}">
                                    <button>进入歌单</button>
                                  </form>
                                </div>
                              </div>
                              <a href="#"><img src="${songlist[j].coverImgUrl}" alt="" class="r r-2x img-full"></a>
                            </div>
                            <div class="padder-v">
                              <a href="#" class="text-ellipsis">${songlist[j].creator}</a>
                              <a href="#" class="text-ellipsis text-xs text-muted">${songlist[j].description}</a>
                            </div>
                          </div>
                        </div>
               `
              }
              $("#slist").html(songlists);
          }
      });
  </script>
  <script>
      function searchs() {
          var content= $("#search").val()
          console.log(content);
          $.ajax({
              type: "POST",
              url: 'https://api.bzqll.com/music/netease/search?key=579621905&s='+content+'&type=song&limit=50&offset=0',
              dataType: 'json',
              success: function (result) {
                  var music=result.data;
                  console.log(music);
                  var Mlist="";
                  for(var i=0 in music) {
                      var b = music[i].id;
                      // console.log(b);

                      var a = "{:url('home/Listen/Music',array('id'=>'b'))}";
                      var c = a.replace('b',b);
                      // console.log(c);
                      Mlist+=`
                      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="bottom">
                            <span class="badge bg-info m-l-sm m-b-sm"></span>
                          </div>
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="text-info padder m-t-sm text-sm">
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star-o text-muted"></i>
                            </div>
                            <div class="center text-center m-t-n">
                              <a href="#" ><i id="${music[i].id}" onclick="a()" class="icon-control-play i-2x"></i></a>
                              <input type="text" hidden id="name" value="${music[i].name}">
                              <input type="text" hidden id="singer" value="${music[i].singer}">
                              <input type="text" hidden id="url" value="${music[i].url}">
                              <input type="text" hidden id="img" value="${music[i].pic}">
                            </div>
                            <div class="bottom padder m-b-sm">
                              <a href="${c}" class="pull-right">
                                <i class="icon-arrow-right"></i>
                              </a>
                              <a href="#">
                              <i class="fa fa-plus-circle"></i>
                              </a>
                            </div>
                          </div>
                          <a href="#"><img src="${music[i].pic}" alt="" class="r r-2x img-full" style="height: 119.66px;width: 119.66px"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis">${music[i].name}</a>
                          <a href="#" class="text-ellipsis text-xs text-muted">${music[i].singer}</a>
                        </div>
                      </div>
                    </div>
                  `
                  }
                  $("#searchmusic").html(Mlist);
              }
          });
      }


  </script>


{/block}
</body>
</html>